<template>
  <div>
    <el-dialog
      title="资源申请"
      :visible.sync="approvalDialog.show"
      width="1300px"
      append-to-body
    >
      <div class="form-title">
        <span class="must-write">资源清单：</span>
      </div>
      <el-table :data="ItemProps" border style="width: 100%">
        <el-table-column label="序号" width="180">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="资源名称" width="180">
        </el-table-column>
        <el-table-column prop="catalogName" label="所属分类"> </el-table-column>
        <el-table-column prop="institutionName" label="资源提供方">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间"> </el-table-column>
      </el-table>
      <br />
      <el-row :gutter="10">
        <el-col :span="2">
          <div class="form-title">
            <span class="must-write">申请描述:</span>
          </div>
        </el-col>
        <el-col :span="22">
          <el-input
            type="textarea"
            :rows="7"
            placeholder="请输入内容"
            v-model="textarea"
            style="width: 100%"
          >
          </el-input>
        </el-col>
      </el-row>
      <br />
      <div class="form-title">
        <span class="not-must-write">文件上传</span>
      </div>
      <div style="display: flex; gap: 16px">
        <el-input readonly v-model="fileName" size="small"></el-input>
        <el-upload
          action="#"
          ref="upload"
          :file-list="fileList"
          :auto-upload="false"
        >
          <el-button slot="trigger" size="small" type="primary"
            >选择文件</el-button
          >
        </el-upload>
        <el-button
          slot="tip"
          size="small"
          type="text"
          @click="downloadTemplateBtn"
          >下载模板</el-button
        >
      </div>
      <br />
      <div class="dialog-bottom">
        <el-button type="primary" @click="submitBtn">确认申请</el-button>
        <el-button size="small" @click="approvalDialog.show = false"
          >取消</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
    props:{
        approvalDialog:{
            type:Object
            default:() => {}
        },
        ItemProps:{
            type:Array
            default:() => []
        },
        fileName:{
            type:String
        }
    },
  data() {
    return {
    //   approvalDialog: {
    //     show: false,
    //   },
    //   ItemProps: [], // 这里需要填写你使用的数据
      textarea: "",
      fileName: "",
      fileList: [],
    };
  },
  methods: {
    submitBtn() {
      // 将数据传递给父组件
      this.$emit("submit-apply", {
        ItemProps: this.ItemProps,
        textarea: this.textarea,
        fileName: this.fileName,
        fileList: this.fileList,
      });

      // 关闭弹窗
      this.approvalDialog.show = false;
    },
    downloadTemplateBtn() {
      // 这里需要填写你的下载模板逻辑
    },
  },
};
</script>
<style scoped>
.form-title {
  margin: 12px 0;
  border-left: 4px solid #198ef8;
  height: 22px;
  line-height: 22px;
  font-size: 14px;
  box-sizing: border-box;
}
.not-must-write {
  margin-left: 16px;
}
.must-write {
  position: relative;
  margin-left: 16px;
}
.must-write::before {
  position: absolute;
  content: "*";
  left: -10px;
  color: red;
}

</style>